import { styled } from '@mui/material/styles'
import Toolbar from '@mui/material/Toolbar'
import Logo from '../../../assets/logo.svg'
import Cart from '../../../assets/cart.svg'
import ProfileButton from './components/profileButton'
import { Link } from 'react-router-dom'

import FavoritesButton from './components/favoritesButton'
import Search from './components/search'

const StyledToolBar = styled(Toolbar)(() => ({
	display: 'flex',
	width: '100%',
	flexDirection: 'row',
	justifyContent: 'center',
	gap: '40px',
	backgroundColor: '#FFE44D',
}))

const Header = () => {
	return (
		<StyledToolBar>
			<Link to='..'>
				<Logo />
			</Link>
			<Search />
			<FavoritesButton />
			<Cart />
			<ProfileButton />
		</StyledToolBar>
	)
}
export default Header
